<template>
	<el-form size="large" ref="loginFormRef" :model="loginForm" class="login-content-form" :rules="loginRules">
		<el-form-item class="login-animation1" prop="username">
			<el-input text :placeholder="$t('message.account.accountPlaceholder1')" v-model="loginForm.username" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-User /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2" prop="password">
			<el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="loginForm.password" autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
				</template>
				<template #suffix>
					<i
						class="iconfont el-input__icon login-content-password"
						:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="isShowPassword = !isShowPassword"
					>
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation3" prop="code" v-if="checkcode&&isCode">
			<el-col :span="15">
				<el-input text maxlength="6" :placeholder="$t('message.account.accountPlaceholder3')" v-model="loginForm.code" clearable autocomplete="off">
					<template #prefix>
						<el-icon class="el-input__icon"><ele-Position /></el-icon>
					</template>
				</el-input>
			</el-col>
			<el-col :span="1"></el-col>
			<el-col :span="8" >
				<div class="login-content-code" @click="getsjc">
					<el-image style="width: 100%; height: 100%" :src="checkcode+'/'+loading.shijiancuo"  />
				</div>
			</el-col>
		</el-form-item>
		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" round v-waves @click="singInBtn" :loading="loading.signIn">
				<span>{{$t('message.account.accountBtnText')}}</span>
			</el-button>
		</el-form-item>
		<div class="font12 mt30 login-animation4 login-msg" >{{ $t('message.mobile.msgText') }}</div>
	</el-form>
</template>

<script lang="ts" setup>
import { onMounted,toRefs, reactive, defineComponent, computed , ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import Cookies from 'js-cookie';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { loginInfo,signIn } from '/@/api/user';
import { useI18n } from 'vue-i18n';
		const { t } = useI18n();
		const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const route = useRoute();
		const router = useRouter();
		const loginFormRef = ref()
		const loginRules = reactive({
			username: [
				{ required: true, message:  t('message.account.accountPlaceholder1'), trigger: 'blur' }
			],
			password: [
				{ required: true, message:  t('message.account.accountPlaceholder2'), trigger: 'blur' }
			],
			code: [
				{ required: true, message: t('message.account.accountPlaceholder3'), trigger: 'blur' }
			]
		})
		const loginForm = reactive({
			username: '',
			password: '',
			code:''
		})
		function keyupSubmit(){
			document.onkeydown = (e) => {
				let _key = window.event.keyCode;
				//!this.clickState是防止用户重复点击回车
				if (_key === 13&&!loading.signIn) {
					singInBtn();
				}
			};
		};
		onMounted(() => {
			getsjc();
			keyupSubmit()
		})
		// 接受的值
		const props = defineProps({
			checkcode: String,
			isCode: Number,
		})
		const isShowPassword = ref(false)

		const loading = reactive({
			signIn: false,
			shijiancuo:"",
		})
		const getsjc=async()=>{
			loginForm.code="";
			loading.shijiancuo=Math.round(Math.random()*90+10)+''+Math.round(Math.random()*9000+1000)+''+Math.round(Math.random()*9000+1000);
		}
		// 时间获取
		const currentTime = computed(() => {
			return formatAxis(new Date());
		});
		// 登录按钮
		const singInBtn =async () => {
			loginFormRef.value.validate((valid) => {
				if (valid) {
					loading.signIn = true;
					const dt={
						username:loginForm.username,
						password:loginForm.password,
						code:loginForm.code,
						type:'uname',
						codetype:loading.shijiancuo,
					}
					signIn(dt).then(async res=>{
						// 存储token
						Session.set('token', res.token);
						Cookies.set('nickName', res.nickName);
						// 前端控制路由，2、请注意执行顺序
						await initBackEndControlRoutes();
						signInSuccess();
						loading.signIn = false;
					})
					.catch((err) => {
						loading.signIn = false;
						getsjc();
					});
				}
			})
		};
		// 登录成功后的跳转
		const signInSuccess = () => {
			// 初始化登录成功时间问候语
			let currentTimeInfo = currentTime.value;
			// 登录成功，跳到转首页
			// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
			if (route.query?.redirect) {
				router.push({
					path: <string>route.query?.redirect,
					query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
				});
			} else {
				router.push('/');
			}
			// 登录成功提示
			// 关闭 loading
			loading.signIn = true;
			const signInText = '欢迎回来！';
			ElMessage.success(`${Cookies.get('nickName')}-${currentTimeInfo}，${signInText}`);
			// 添加 loading，防止第一次进入界面时出现短暂空白
			NextLoading.start();
		};
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;
	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
		height: 40px;
    	overflow: hidden;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
	.login-msg {
		color: var(--el-text-color-placeholder);
	}
}
</style>
